<template>
  <div id="data-screen-container" class="data-screen-container vab-data-fullscreen">
    <div class="hidden-sm-and-up" style="padding: 20px">
      <vab-alert title="手机端不支持数据大屏演示" type="warning" />
    </div>
    <div class="hidden-xs-only">
      <wuhan-report-header
        :style="{
          height: headerContentHeight,
          'line-height': headerContentHeight,
        }"
        @click="homeData"
      />
      <div style="padding: 30px 40px 0 40px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-row v-if="reports" :gutter="20">
              <!-- 总分 -->
              <template v-for="(item, index) in reports" :key="index">
                <el-col :span="8">
                  <div @click="clickExam(item.id)" class="data-screen-card" :style="{ height: leftCardHeight2 }">
                    <div class="card-title" style="font-size: 30px">{{ item.name }}</div>
                    <el-row style="margin-top: 20px">
                      <el-col :span="12">
                        <el-progress width="80" :show-text="true" :stroke-width="25" :percentage="item.scale" type="circle" />
                        <br />
                      </el-col>
                      <el-col :span="12">
                        <span style="font-size: 16px">
                          <br />
                          报名人数:{{ item.students }}
                          <br />
                          完成人数:{{ item.complete }}
                          <br />
                          {{ item.exam_start }} - {{ item.exam_end }}
                        </span>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>

                <el-col v-if="item.days" :span="16">
                  <div class="data-screen-card" :style="{ height: leftCardHeight2 }">
                    <el-row style="margin-top: 25px">
                      <el-col style="font-size: 20px" v-for="(bitem, bitem_index) in item.days" :span="24">
                        {{ bitem.enddate }}完成人数:{{ bitem.num }}人
                      </el-col>
                    </el-row>
                  </div>
                </el-col>

                <el-col v-if="item.xy" :span="24">
                  <div class="data-screen-card" :style="{ height: topCardHeight - leftCardHeight2 }">
                    <el-row style="margin-top: 25px">
                      <el-col :span="24">
                        <zk-data-project-details style="height: 780px" :x="item.xy.x" :y="item.xy.y" />
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </template>
            </el-row>
            <div v-else>
              <center style="margin-top: 200px">暂无数据</center>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <vab-theme-setting />
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'DataScreen',
})

const headerContentHeight = ref<any>('60px')
const topCardHeight = ref<any>('calc((100vh - 128px)')
const bottomCardHeight = ref<any>('174px')

const leftCardHeight1 = ref<any>('calc((100vh - 165px) / 3.5)')
const leftCardHeight2 = ref<any>('calc((100vh - 165px) / 5)')
const leftCardHeight3 = ref<any>('calc((100vh - 165px) / 2.63)')

const rightCardHeight1 = ref<any>('calc((100vh - 165px) / 3)')
const rightCardHeight2 = ref<any>('calc((100vh - 165px) / 2.63)')
const rightCardHeight3 = ref<any>('calc((100vh - 165px) / 3.5)')
const $baseMessage = inject<any>('$baseMessage')
import { is_client } from '/@/api/scanCard'
import { api_getReportData } from '/@/api/zkDataScreen'

const isclient = ref<boolean>(false) //当前是否是客户端

const queryForm = ref({
  city_id: 1,
  region_name: '',
  exam_id: 0,
})
//报表
const reports = ref(true)
//查看数据
const selectData = async () => {
  //根据年级id，班级id，搜索对应的students
  const res = await api_getReportData(queryForm.value)
  reports.value = res.data
}
const clickRegion = (region: any) => {
  queryForm.value.exam_id = 0
  queryForm.value.region_name = region.name
  selectData()
}
const clickExam = (exam_id: any) => {
  queryForm.value.region_name = ''
  queryForm.value.exam_id = exam_id
  selectData()
}
const homeData = async () => {
  //根据年级id，班级id，搜索对应的students
  queryForm.value.region_name = ''
  //selectData()
  window.location.reload()
}
const route = useRoute()
const exam_id = ref<any>(0)
onMounted(async () => {
  // let examid = parseInt(route.query.exam_id)
  // if(examid){
  //   queryForm.value.exam_id = exam_id
  // }

  // useTimeoutFn(() => {
  //   $baseMessage('点击右上角【全屏】按钮使用效果更佳', 'success', 'hey')
  // }, 1000)
  document.getElementsByTagName('body')[0].className = ''

  isclient.value = is_client()
  selectData()
})
</script>

<style lang="scss" scoped>
#data-screen-container.data-screen-container.vab-data-fullscreen {
  overflow: auto;
  color: #fff;
  background: #01022e !important;

  :deep() {
    .vab-theme-setting {
      background: #01022e;
      border: 1px solid #101f58;

      section {
        > div {
          &:nth-child(1),
          &:nth-child(2),
          &:nth-child(3),
          &:nth-child(4) {
            display: none;
          }
        }
      }
    }
  }

  .data-screen-card {
    position: relative;
    width: 100%;
    min-height: 160px;
    padding: 20px;
    margin-bottom: 20px;
    border: 3px solid #01ffff;
    border-radius: 5px;

    .card-title {
      height: 20px;
      padding-left: 10px;
      line-height: 20px;
      text-align: left;
      border-left: 3px solid #01ffff;
    }

    &::before {
      position: absolute;
      top: -3px;
      bottom: -3px;
      left: 30px;
      z-index: 0;
      width: calc(100% - 60px);
      pointer-events: none;
      content: '';
      border-top: 3px solid #101f58;
      border-bottom: 3px solid #101f58;
    }

    &::after {
      position: absolute;
      top: 30px;
      right: -3px;
      left: -3px;
      z-index: 0;
      height: calc(100% - 60px);
      pointer-events: none;
      content: '';
      border-right: 3px solid #101f58;
      border-left: 3px solid #101f58;
    }
  }
}
</style>
